.messStyle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    line-height: 48px;
    padding: 15px 19px;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 4px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    transition: top .3s ease-out;
}

.success {
    background: #f0f9eb;
    color: #67C23A;
}

.warning {
    background: #fdf6ec;
    color: #E6A23C;
}

.error {
    background: #fef0f0;
    color: #F56C6C;
}

.info {
    background: #f4f4f5;
    color: #909399;
}

.fade-enter-active{
    transition: all .3s ease-in;
}

.fade-leave-active{
    transition: all .3s ease-out;
}

.fade-enter-from,.fade-leave-to{
    transform: translate(-50%,-20px);
    opacity: 0;
}